<template>
	<view class="pay">
		<view class="share-modal">
			<view class="main" :class="{'errorpw':errorpw}">
				<image @click="close" class="close" src="../../../static/icon1/47.png"></image>
				<view class="modal-title">
					<text>请输入支付密码</text>
				</view>
				<view class="modal-content">
					<view class="modal-content-line">
						<u-line color="#ccc"></u-line>
					</view>
					<view class="modal-content-money">
						<view class="rmb">￥</view>
						<view class="rmb-num">{{price}}</view>
					</view>
					<view class="modal-content-type">
						<view class="modal-content-type-left">支付方式</view>
						<view class="modal-content-type-right">
							<image src="../../../static/rmb.png" mode="widthFix"></image>
							<text>余额</text>
						</view>
					</view>
				</view>
				<view class="pay-code">
					<input type="number" :focus="focus" v-model="payPwd" maxlength="6" @input="getPayCode" />
					<block v-for="(item, index) in ranges" :key="index">
						<view :class="['box', { active: codeIndex === item}]">
							<view class="line"></view>
							<text>{{ codeArr[index] ? codeArr[index] : ''}}</text>
						</view>
					</block>
				</view>
				<view class="repwd" v-if="!isShowForgetPassword" @click="toRePasssWord">忘记密码</view>
				<view class="repwd" style="color: #FE4B28;" v-if="isShowForgetPassword" @click="toRePasssWord">忘记密码
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		name: 'Pay',
		props: {
			price: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				focus: false, //键盘输入焦点
				isShowPassWordAnimation: false, //密码错误执行动画
				codeArr: [], //密码
				codeIndex: 1,
				ranges: [1, 2, 3, 4, 5, 6],
				isShowForgetPassword: false, //是否弹出忘记密码
				payType: 2, // 余额支付
				payPwd: '',
				errorpw: false,
			}
		},
		methods: {
			close() {
				this.$emit('close');
			},
			//点击链接至账户安全。
			toRePasssWord() {
				uni.navigateTo({
					url: '/pages/account-security/account-security'
				})
			},
			getPayCode(e) {
				let {
					value
				} = e.detail
				let del = false
				this.payPwd = value
				if (value.length < this.codeArr.length) {
					del = true
				}
				this.codeArr.length = value.length
				this.codeArr.fill("●")
				this.codeIndex = this.codeArr.length + 1
				if (del) {
					return
				}
				this.codeArr[value.length - 1] = value[value.length - 1]
				setTimeout(() => {
					if (this.codeArr.length != 0) {
						this.$set(this.codeArr, [this.codeArr.length - 1], "●")
					}
				}, 1000)
				if (this.codeIndex == 7) {
					this.handleComfirmPay()
				}
			},
			async handleComfirmPay() {
				this.$fetch(this.$api.payEnsureAccount, {
					account: this.price,
					payPwd: this.payPwd
				}, 'POST').then(res => {
					let {
						code,
						msg
					} = res
					// 动画
					if (code == 500) {
						this.errorpw = true
					}
					if (code == 0) {
						this.$emit('close');
					}
					uni.showToast({
						title: res.msg || '数据错误',
						icon: 'none'
					})
				}).finally(e => {
					this.showPopup = false
				})
			},
		}
	})
</script>
<style lang="scss" scoped>
	.share-modal {
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.40);
		display: flex;
		align-items: center;
		justify-content: center;

		&>.main {
			position: relative;
			top: -100rpx;
			width: 570rpx;
			// height: 250rpx;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px;
			line-height: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>.modal-title {
				font-size: 32rpx;
				font-weight: 600;
				margin-top: 20rpx;

				// margin: 30rpx 0 50rpx;
				&>.imgs {
					position: relative;

					image {
						position: absolute;
						top: 0rpx;
						bottom: 0;
						right: -80rpx;
						width: 50rpx;
						height: 40rpx;
					}
				}
			}

			.modal-content {
				width: 100%;
				height: 240rpx;

				// border: 1px solid;
				.modal-content-line {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 30rpx 30rpx;
				}

				.modal-content-money {
					width: 100%;
					height: 100rpx;
					margin-top: -10rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					// border:1px solid;
					.rmb {
						font-size: 40rpx;
						color: #333333;
						margin-right: 10rpx;
						font-weight: 600;
						margin-top: 15rpx;
					}

					.rmb-num {
						font-size: 66rpx;
						color: #333333;
						font-weight: 600;
					}
				}

				.modal-content-type {
					width: 92%;
					margin: 0 auto;
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.modal-content-type-left {}

					.modal-content-type-right {
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 40rpx;
							height: 100%;
						}

						text {
							margin-left: 6rpx;
							color: #333333;
							font-size: 26rpx;
						}
					}
				}
			}

			&>.pay-code {
				padding-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;

				&>input {
					position: absolute;
					top: 0;
					left: -100%;
					width: 200%;
					height: 100%;
					text-align: left;
					z-index: 9;
					opacity: 1;
				}

				&>.box {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 80rpx;
					height: 80rpx;
					margin-right: 10rpx;
					font-size: 22px;
					line-height: 90rpx;
					box-sizing: border-box;
					background-color: #F2F2F2;
					border-radius: 2px;

					&:last-child {
						margin-right: 0;
					}
				}

				&>.active {
					border: 2rpx solid #cccccc;

					@keyframes twinkling {
						0% {
							opacity: 0.1;
						}

						50% {
							opacity: 0.8;
						}

						100% {
							opacity: 0.1;
						}
					}

					&>.line {
						display: block;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 2upx;
						height: 40upx;
						background: #333333;
						animation: twinkling 1s infinite ease;
					}
				}
			}

			.repwd {
				height: 62rpx;
				margin-bottom: -30rpx;
				font-size: 24rpx;
				color: #999999;
				// border: 1px solid;
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			&>.button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 70rpx;
				margin-top: 60rpx;
				border-radius: 50rpx;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}

			&>.close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	.errorpw {
		animation: swing 1s .15s linear 1;
	}

	@keyframes swing {

		10%,
		90% {
			transform: translate(-4rpx, 0);
		}

		20%,
		80% {
			transform: translate(+4rpx, 0);
		}

		30%,
		70% {
			transform: translate(-6rpx, 0);
		}

		40%,
		60% {
			transform: translate(+6rpx, 0);
		}

		50% {
			transform: translate(-8rpx, 0);
		}
	}
</style>